<template>
	<view class="content">
		<view class="user-bg">
			<view class="u-flex user-box u-p-l-40 u-p-r-30 u-p-b-30" style="margin-top: 80rpx;">
				<view class="u-m-r-15" @click="login()">
					<u-avatar :src="oss+userinfo.avatar" size="80" style="border: 1px solid #FFFFFF;" :fade="true"
						duration="450" :lazy-load="true"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-12" style="font-weight: 800;">
						<view class="" v-show="userinfo.username!=null">
							{{userinfo.username}} &nbsp;|&nbsp; {{userinfo.nickname}}
						</view>
						<view class="" v-show="userinfo.username==null">
							请先登录
						</view>
						
					</view>
					<view class="u-font-10" style="line-height: 40rpx;">
						<image src="../../../static/icon/lhcsricon.png"
							style="width: 20rpx;height: 20rpx;margin-right: 20rpx;"></image>
						联合创始人&nbsp; 邀请码：LMVYLJ
					</view>
				</view>
				<view class="u-m-l-10 u-p-10">
					<image src="../../../static/icon/infoicon.png"  @click="openinfo('/pages/order/infoContent/infoContent')" style="width: 25rpx;height: 25rpx;" mode=""></image>
				</view>
				<view class="u-m-l-10 u-p-10">
					<image src="../../../static/icon/setting.png" style="width: 25rpx;height: 25rpx;"
						@click="openinfo('/pages/setting/setting')" mode=""></image>
				</view>
			</view>
		</view>
		<view class="card-body" style="position: relative; top:-145upx; margin-bottom: 20upx;">
			<view @click="openinfo('/pages/tabBar/my/myMoney/myMoney')">
				<u-grid :col="2" :border="false" style="border-bottom: .5px solid #e3e3e3;">
					<u-grid-item>
						<view class="grid-text u-font-10 u-m-t-10" style="color: #0092fe;font-size: 30rpx;">
							{{userinfo.dayMoney}}00
						</view>
						<view class="grid-text u-font-10 u-m-t-10">今日收入(元)</view>
					</u-grid-item>
					<u-grid-item>
						<view class="grid-text u-font-10 u-m-t-10" style="color: #0092fe;font-size: 30rpx;">
							{{userinfo.sumMonery}}00
						</view>
						<view class="grid-text u-font-10 u-m-t-10">累计收益(元)</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="">
				<u-grid :col="4" :border="false">
					<u-grid-item @click="openinfo('/pages/tabBar/my/good/good')">
						<view class="grid-text u-font-10 u-m-t-10" style="color: #0092fe;font-size: 30rpx;">
							0 {{userinfo.rate}}%
						</view>
						<view class="grid-text u-font-10 u-m-t-10">好评率</view>
					</u-grid-item>
					<u-grid-item @click="openinfo('/pages/tabBar/my/theNumber/theNumber')">
						<view class="grid-text u-font-10 u-m-t-10" style="color: #0092fe;font-size: 30rpx;">
							00 {{userinfo.number}}
						</view>
						<view class="grid-text u-font-10 u-m-t-10">接诊人数</view>
					</u-grid-item>
					<u-grid-item >
						<view class="grid-text u-font-10 u-m-t-10" style="color: #0092fe;font-size: 30rpx;">
							00{{userinfo.serveNumber}}
						</view>
						<view class="grid-text u-font-10 u-m-t-10">我的服务</view>
					</u-grid-item>
					<!-- @click="openinfo('/pages/tabBar/my/myCase/myCase')" -->
					<u-grid-item>
						<view class="grid-text u-font-10 u-m-t-10" style="color: #0092fe;font-size: 30rpx;">
							00 {{userinfo.mycase}}
						</view>
						<view class="grid-text u-font-10 u-m-t-10">我的案例</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 科普管理 -->
		<view class="card-body" style="position: relative; top:-145upx; margin-bottom: 20upx;">
			<!-- card -->
			<view class="">
				<text class="u-m-l-20 ">科普管理</text>
			</view>
			<view class="">
				<u-grid :col="4" :border="false">
					<u-grid-item @click="openinfo('/pages/tabBar/my/MOPP/fawen')">
						<image src="../../../static/icon/my/wdfb.png" class="icon_image" mode=""></image>
						<view class="grid-text u-font-10 u-m-t-10">我的发布</view>
					</u-grid-item>
					<u-grid-item @click="openinfo('/pages/tabBar/my/MOPP/soucang')">
						<image src="../../../static/icon/my/wdgz.png" class="icon_image" mode=""></image>
						<view class="grid-text u-font-10 u-m-t-10">我的收藏</view>
					</u-grid-item>
					<u-grid-item @click="openinfo('/pages/tabBar/my/MOPP/dianzan')">
						<image src="../../../static/icon/my/dzsc.png" class="icon_image" mode=""></image>
						<view class="grid-text u-font-10 u-m-t-10">我的点赞</view>
					</u-grid-item>
					<u-grid-item @click="openinfo('/pages/tabBar/my/MOPP/pinglun')">
						<image src="../../../static/icon/my/wdpl.png" class="icon_image" mode=""></image>
						<view class="grid-text u-font-10 u-m-t-10">我的评论</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 名片管理 -->
		<view class="card-body" style="position: relative; top:-145upx; margin-bottom: 20upx;">
			<view class="">
				<text class="u-m-l-20 ">名片管理</text>
			</view>
			<view class="">
				<u-grid :col="4" :border="false">
					<u-grid-item @click="openinfo('/pages/tabBar/my/myServer/myServer')">
						<image src="../../../static/icon/my/wdfw.png"  class="icon_image" mode=""></image>
						<view class="grid-text u-font-10 u-m-t-10">我的服务</view>
					</u-grid-item>
					<u-grid-item @click="openinfo('/pages/tabBar/my/myCase/myCase')">
						<image src="../../../static/icon/my/wdal.png" class="icon_image" mode=""></image>
						<view class="grid-text u-font-10 u-m-t-10">我的案例</view>
					</u-grid-item>
					<u-grid-item @click="openinfo('/pages/tabBar/my/initial')">
						<image src="../../../static/icon/my/zczl.png" class="icon_image" mode=""></image>
						<view class="grid-text u-font-10 u-m-t-10">基础资料</view>
					</u-grid-item>
					<u-grid-item @click="openinfo('/pages/tabBar/my/Qualification')">
						<image src="../../../static/icon/my/zzrz.png" class="icon_image" mode=""></image>
						<view class="grid-text u-font-10 u-m-t-10">资质证件</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<!-- 工具/服务 -->
		<view class="card-body" style="position: relative; top:-145upx; margin-bottom: 20upx;">
			<view class="">
				<text class="u-m-l-20 ">工具/服务</text>
			</view>
			<view class="">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item,index) in staticImgList" @click="openinfo(item.page)" :key="index">
						<image :src="item.url" class="icon_image" mode=""></image>
						<view class="grid-text u-font-10 u-m-t-10">{{item.name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			console.debug("进入了我的页面");
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userInfo');
			console.log(this.userinfo);
		},
		data() {
			return {
				background: {
					backgroundColor: '#00a8ff'
				},
				oss:'http://zjmeifeng.oss-cn-beijing.aliyuncs.com/',
				staticImgList: [{
						url: "../../../static/icon/my/kjhf.png",
						name: "快捷回复",
						page: "/pages/tabBar/my/fastReply/fastReply"
					},
					{
						url: "../../../static/icon/my/tjyj.png",
						name: "推荐有奖"
					},
					{
						url: "../../../static/icon/my/wdsy.png",
						name: "我的收益"
					},
					{
						url: "../../../static/icon/my/wdtd.png",
						name: "我的团队"
					},
					{
						url: "../../../static/icon/my/zxkf.png",
						name: "在线客服"
					},
					{
						url: "../../../static/icon/my/gnfk.png",
						name: "功能反馈"
					},
					{
						url: "../../../static/icon/my/czsc.png",
						name: "操作手册"
					},
					{
						url: "../../../static/icon/my/gymf.png",
						name: "关于美蜂"
					}
				],
				show: true,
				userinfo: {

				},
				
			}
		},
		methods: {
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			login() {	
				this.openinfo('/pages/guide/Login')
			}
		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		background-color: #F8F8F8;
	}

	.user-bg {
		background: url(../../../static/icon/my/bg.png);
		width: 100vw;
		height: 30vh;
		background-size: 100% 100%;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		// background-color: #fff;
		color: #FFFFFF;
	}

	.icon_image {
		height: 60rpx;
		width: 60rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.card-hader {
		text-align: left;
		width: 20%;
		margin: 0 500upx;
		padding: 15upx 20upx;
		background-color: #FFFFFF;
		border: 1upx solid #FDF6EC;
	}

	.card-body {
		width: 90%;
		margin: 0 auto;
		padding: 15upx 20upx;
		background-color: #FFFFFF;
		border: 1upx solid #FDF6EC;
		border-radius: 10rpx;
		box-shadow: 0rpx 1rpx 2rpx #dbe4f5;
	}
</style>
